import React, { useState } from "react";
import LlxForm from 'components/LlxForm/index'
import { Form ,notification,Cascader,Modal} from 'antd';
import {addLables} from 'api/index'


const { SHOW_CHILD } = Cascader;

const AddLabel = (props) => {
  const {isModalVisible, setIsModalVisible,labelOption,list,userName,type} = props

  const [form] = Form.useForm();

  const [loading,setLoading] = useState(false)

  const formItem = [
    {label: '新增标签', name: 'label' , span: 20 ,rules:[
      {
        required: true,
        message: '请选择标签'
      },
    ],render:()=>{
      return  <Cascader  maxTagCount="responsive" showCheckedStrategy={SHOW_CHILD} fieldNames={{value:'id',label:'labelName'}} options={labelOption} multiple placeholder="请选择标签" />
    }}
  ]

  const handleOk = async () => {
    if(loading) return
    
    setLoading(true)

    form.validateFields().then(async()=>{

      const data = form.getFieldValue().label.map(i=>i[1])

      await addLables({
        relationId: list.map(i => i.id),
        labelIds: data, type: type })

        notification.success({
          message: '添加成功',
          description: '操作人：' + userName,
          duration:1.5
        });
    
        form.resetFields()
        setIsModalVisible(false);
        props.getNewList()

    }).catch(()=>{}).finally(()=>{
      setLoading(false)
    })
  }

  const handleCancel = () => {
    form.resetFields()
    setIsModalVisible(false);
  };
  
  return   <Modal width={600} title="新增标签" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <LlxForm form={form} labelCol={8} formItem={formItem} />
   </Modal>
}

export default AddLabel